<template>
	<div class="personInformation">
		<!-- 上传照片 -->
		<div class="logo" @click="uploadImg">
			<img :src="logoInfo.url" alt="" class="logo-img" mode="aspectFill">
			<div class="logo-tip" >点击更换头像</div>
		</div>
		<!-- 上传照片end -->
		
		<!-- 信息列 -->
		  
		  <div class="cell-group">
			  <div class="cell">
				  <div class="label">昵称</div>
				  <input type="text" v-model="nickName" placeholder="输入昵称" class="nick-input"/>
			  </div>
			  
			  <div class="cell">
				  <div class="label">性别</div>
				  <picker mode="selector" class="input" :range="sexRange" @change="sexChange" range-key="name" :value="sexValIndex">
					<div >{{sex.name}}</div>
				  </picker>
			  </div>
			  <div class="cell">
				  <div class="label">生日/星座</div>
				  <div class="input" @click="showDatePicker">{{birth|filterBirth}}></div>
			  </div>
			  <div class="cell">
				  <div class="label">所在地</div>
				  <div class="input" @click="showAreaPicker">{{address|filterAddress}}></div>
			  </div>
			  <div class="cell">
				  <div class="label">个性签名</div>
				  <textarea v-model="intro" placeholder="请输入个性签名" v-if="!showPopoupFlag"/>
				  <div v-else class="textarea">{{intro}}</div>
			  </div>
		  </div>
		  <!-- <van-cell-group> -->
			  <!-- <van-field
			  			label="昵称:"
						:value="nickName"
			  			placeholder="输入昵称"
						@change="getNickName"
			  /> -->
			  <!-- <picker mode="selector" :range="sexRange" @change="sexChange" range-key="name" :value="sexValIndex">
			  	<van-cell title="性别" :value="sex.name"  is-link />
			  </picker> -->
		    
		    <!-- <van-cell title="生日/星座" :value="birth|filterBirth"  is-link @click="this.$refs.datePicker.toggleVisible()"/> -->
			<!-- <van-cell title="所在地" :value="address|filterAddress" is-link @click="this.$refs.areaPicker.toggleVisible()"/> -->
			<!-- <van-field
			    :value="intro"
			    label="个性签名"
			    type="textarea"
			    placeholder="请输入个性签名"
				@change="getIntro"
			  />
		  </van-cell-group> -->
		  
			<!-- 信息列end -->
			
			<div class="btn-wrapper">
				<div class="btn" @click="submit">保存</div>
			</div>
			
			<!-- 生日/星座选择器 -->
			<datePicker @getDate="getDate" ref="datePicker"/>
			 <!-- 地址选择器 -->
			 <areaPicker @getArea="getArea" @getVisible="getVisible" ref="areaPicker"/>
			 <image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel" :show-reset-btn="false" :show-rotate-btn="false"></image-cropper>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	import datePicker from '@/pages/components/datePicker'
	import areaPicker from '@/pages/components/areaPicker'
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	export default {
		name:'personInformation',
		components:{datePicker,areaPicker,ImageCropper},
		data() {
			return {
				showPopoupFlag:false,//显示隐藏textarea
				nickName:'',
				logoInfo:{
					url:'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/personDefault.png',
					id:''
				},
				sex:{name:'保密',val:0},
				sexIndex:0,
				sexRange:[{name:'保密',val:0},{name:'男',val:1},{name:'女',val:2}],
				
				birth:{
					year:'',
					month:'',
					day:'',
					astro:''
				},
				address:{
					province:'',
					city:''
				},
				intro:'',//个性签名
				
				datePickerVisible:false,//显示日期选择picker
				tempFilePath: ''//图片的临时路径
			}
		},
		filters:{
			filterBirth(e){
				if(!e.year){
					return '请选择'
				}else{
					return `${e.year}-${e.month}-${e.day}/${e.astro}`
				}
			},
			filterAddress(e){
				
				if(!e.province){
					return '请选择'
				}else{
					return `${e.province.name}-${e.city.name}`
				}
				
			}
		},
		methods: {
			
			getNickName(e){
				//获取昵称
				this.nickName=e.detail
			},
			getIntro(e){
				//获取签名
				this.intro=e.detail
			},
			showDatePicker(){
				//显示日期选择
				this.showPopoupFlag=true;
				this.$refs.datePicker.toggleVisible()
			},
			showAreaPicker(){
				//显示地址选择
				this.showPopoupFlag=true;
				this.$refs.areaPicker.toggleVisible()
				
			},
			uploadImg() {
				//上传头像
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			confirm(e) {
				this.tempFilePath = ''
				this.uploadHandle(e.detail.tempFilePath)
			},
			cancel() {
				console.log('canceled')
			},
			uploadHandle(file){
				let _this=this
				uni.showLoading({
					mask:true,
					title:'上传中...'
				})
				wx.uploadFile({
				    url: 'https://wxapp.bbiji.com/api/file/upload-img',
				    filePath: file,
				    name: 'photo',
				    header: {
				        'content-type': 'application/json' // 默认值
				    },
				    success: function (res) {
				        let data = JSON.parse(res.data);
				        	if(data.level!='success'){
				        		uni.showToast({
				        			title:data.message,
				        			icon:'none'
				        		})
				        		return
				        	}
				        	_this.logoInfo={
				        		url:data.data.img_url,
				        		id:data.data.id
				        	}
							uni.hideLoading();
				    },
					fail:function(err){
						uni.hideLoading();
						uni.showToast({
							icon:'none',
							title:'上传失败'
						})
					}
				})
			},
			
			sexChange(e){
				//选中性别0,1,2
				this.sexIndex=e.detail.value;
				this.sex=this.sexRange[this.sexIndex];
			},
			getDate(e){
				//获取年月日，星座
				this.birth=e;
				
			},
			getArea(e){
				//获取所在地
				this.address=e;
			},
			async submit(){
				// 保存
				let params={
					user_token:uni.getStorageSync('userToken'),
					nickname:this.nickName,
					photo_id:this.logoInfo.id,
					sex:this.sex.val,
					birthday:`${this.birth.year}-${this.birth.month}-${this.birth.day}`,
					signature:this.intro,
					province:this.address.province?this.address.province.name:'',
					city:this.address.city?this.address.city.name:'',
					constellation:this.birth.astro
				}
				let res=await this.$api.setUserInfo(params)
				uni.showToast({
					title:res.data.message,
					icon:'none'
				})
				if(res.data.level=='success'){
					uni.navigateBack({
						delta:1
					})
				}
			},
			async getUserInfo(){
				//获取用户信息
				let userToken=uni.getStorageSync('userToken')
				let res=await this.$api.getUserInfo({user_token:userToken});
				if(res.data.level=='success'){
					let data=res.data.data;
					let userInfo=res.data.data.user_info;
					this.nickName=userInfo.nickname;//昵称
					this.logoInfo=userInfo.photo_id?{id:userInfo.photo_id,url:userInfo.photo_url}:{};//头像
					this.sex={name:this.$currency.sexTag1(userInfo.sex),val:userInfo.sex};//性别
					let birth=userInfo.birthday?this.formDate(userInfo.birthday):{};//生日星座
					birth.astro=userInfo.constellation;
					this.birth=birth;
					
					this.address={
						province:userInfo.province?{name:userInfo.province,code:''}:{name:'',code:''},
						city:userInfo.city?{name:userInfo.city,code:''}:{name:'',code:''}
					}
					this.intro=userInfo.signature
				}
			},
			formDate(date){
				let ymd=date.split(' ')[0];
				let arr=ymd.split('-')
				let year=arr[0];
				let month=arr[1];
				let day=arr[2];
				return{
					year,month,day
				}
			}
		},
		onShow() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.logo{
		@include  flexWrap();
		&-img{
			width:120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		&-tip{
			width: 100%;
			text-align: center;
			margin-top:20rpx;
		}
	}
	.logo-tip{
		font-size: 28rpx;
	}
	
	.cell-group{
		padding:20rpx 36rpx;
		.cell{
			padding:30rpx 0;
			@include flexWrap(space-between);
			&:not(:last-of-type){
				border-bottom:1px solid #eee;
			}
			.label{
				font-size: 28rpx;
				font-weight: 600;
			}
			.nick-input{
				padding:20rpx 0;
				width:100%;
				color:#6F7073;
			}
			.input{
				font-size: 28rpx;
				flex:1;
				text-align: right;
				color:#6F7073;
			}
			textarea{
				margin-top:30rpx;
				width: 100%;
				background:rgba(247,247,247,1);
				border-radius:8px;
			}
			.textarea{
				margin-top:30rpx;
				width:100%;
				padding:20rpx;
				background:rgba(247,247,247,1);
				border-radius:8px;
				height: 150px;
			}
		}
	}
	
	.btn-wrapper{
		position: fixed;
		bottom:20rpx;
		width: 100%;
		@include flex();
		.btn{
			text-align: center;
			background: #FFE226;
			font-weight: 600;
			color:#000;
			width:90vw;
			padding:20rpx 0;
			border-radius: 16rpx;
			
		}
	}
	
	
</style>
<!-- <style>
	.personInformation textarea{
		height: 500rpx;
		background: #eee;
	}
	.personInformation .van-field__body--textarea.van-field__body--ios{
		margin-top:0;
	}
</style> -->
